<template>
	 <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
	    <el-tab-pane v-for="(item,index) in category" :key="index" :label="item.name" :name="item.name">
			
		
				
			  <div class="block" >
				  <div class="picA" @click="choose_pic">
				  	<i class="el-icon-plus" style="margin-top: 45%; height: 28px; width: 28px;"></i>
				  </div>
				<div  class="block" v-for="(item1,index1) in item.img" :key="index1">
			   <i class="el-icon-circle-close" @click="del_img(item1.id)"></i>
			    <el-image
			      style="width: 100px; height: 100px" 
			      :src="getimg+item1.url"
			      fit="fill"></el-image>
			  </div>
		</div>
		</el-tab-pane>
		  <Pic :drawer="drawer" :back_fun="back" :send_father="get_img"></Pic>
	  </el-tabs>
	
</template>

<script>
	import {Api_url} from '../../api/config.js'
	import ImageModel from '../../model/image.js'
	import Pic from '../../components/pic_upload.vue'
	export default {
		data(){
			return{
				activeName:'',
				category:[],
				drawer:false,
				getimg:Api_url,
			}
		},
		components: {
			Pic
		},
		mounted() {
			this.get_category()
		},
		methods:{
			get_category(){
				ImageModel.get_img_category().then(res=>{
					this.category=res.data;
					if(this.category.length>0)
					{
						this.activeName=this.category[0].name
					}
					
				})
			},
			handleClick(e){
				//console.log(e)
			},
			del_img(e){
				 this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
							ImageModel.del_img(e).then(res=>{
								if(res.code==200){
									this.$message({
									  type: 'success',
									  message: '删除成功!'
									});
									this.get_category()
								}
								
							})
						
				        }).catch(() => {
				          this.$message({
				            type: 'info',
				            message: '已取消删除'
				          });          
				        });
			},
			back(e){
				this.drawer=false
			},
			choose_pic() {
				this.drawer = !this.drawer	
			},
			get_img(e){
				
				this.drawer=false
			},
		}
		
	}
</script>

<style>
	.block{
		display: flex;  
		flex-wrap: wrap;
	}
	.picA {
		width: 100px;
		height: 100px;
		background-color: #FBFDFF;
		border: 1px dashed #C0CCDA;
		border-radius: 6px;
		box-sizing: border-box;
		vertical-align: top;
		text-align: center;
		margin: 6px;
	}
</style>
